<template lang="pug">
.sidebar
  img.sidebar-logo(src="../static/images/logo_2.png")
  .sidebar-container
    el-menu(
      background-color="#353644"
      text-color="#fff"
      active-text-color="#fff"
      :router="true"
      :default-openeds="opends"
      :open="3"
    )
      .sidebar-menu-item(v-for="item in menus")
        el-menu-item(
          v-show="!item.children.length"
          :index="item.url"
          :route="{ name: item.url }"
          :class="{'is-active': $route.meta.name === item.metaName}"
        ) {{item.name}}
        el-submenu.is-active(
          v-show="item.children.length"
          :index="item.url"
        )
          template(slot="title") {{item.name}}
          el-menu-item(v-for="child in item.children", :class="{'is-active': $route.meta.name === child.metaName}", :index="child.url", :route="{ name: child.url }") {{child.name}}
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'appSidebar',
  data () {
    return {
      menus: [
        {
          name: '概览',
          url: 'index',
          metaName: 'index',
          children: []
        },
        {
          name: '品牌管理',
          url: 'brandManage',
          metaName: 'brandManage',
          children: []
        },
        {
          name: '材料管理',
          url: 'material',
          metaName: 'material',
          children: []
        },
        {
          name: '找材管理',
          url: 'findManage',
          metaName: 'findManage',
          children: [{
            name: '找材列表',
            url: 'findList',
            metaName: 'findList'
          }, {
            name: '消息回复',
            url: 'message',
            metaName: 'message'
          }]
        },
        {
          name: '样品订单',
          url: 'orders',
          metaName: 'orders',
          children: []
        },
        {
          name: '通知管理',
          url: 'noticeManage',
          metaName: 'noticeManage',
          children: []
        },
        {
          name: '人员管理',
          url: 'personManage',
          metaName: 'personManage',
          children: []
        },
        {
          name: '案例管理',
          url: 'caseManage',
          metaName: 'caseManage',
          children: [{
            name: '案例列表',
            url: 'caseList',
            metaName: 'caseList'
          }, {
            name: '标签管理',
            url: 'tagManage',
            metaName: 'tagManage'
          }]
        },
        {
          name: '图片管理',
          url: 'imageManage',
          metaName: 'imageManage',
          children: []
        },
        {
          name: '小程序管理设置',
          url: 'appltManage',
          metaName: 'appltManage',
          children: []
        },
        {
          name: '我的',
          url: 'account',
          metaName: 'account',
          children: [{
            name: '基本信息',
            url: 'info',
            metaName: 'basicInfo'
          }, {
            name: '修改密码',
            url: 'changePwd',
            metaName: 'changePwd'
          }, {
            name: '操作日志',
            url: 'logs',
            metaName: 'logs'
          }]
        }
      ]
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.user
    }),
    opends () {
      let opends = this.$route.matched.map(item => {
        return item.meta.openIndex
      })
      return opends
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: 208px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  padding-top: 40px;
  background: #353644;
}
.sidebar-logo {
  display: block;
  margin: 0 auto;
}
.sidebar-container {
  width: 100%;
  margin-top: 30px;
  .el-menu {
    border-right: none;
  }
}
.sidebar-menu-item {
  .el-menu-item {
    &.is-active {
      background-color: #282935 !important;
    }
  }
}
</style>
